import { Component, Vue } from 'vue-property-decorator'
import OperationCol from '@/components/OperationCol'
import AddressLayer from '@/modules/addressLayer'
import service from '@/lib/service'
import Styles from './style/index.less'
import TableEmpty from '@/components/tableEmpty'

interface TableData {
  id: string
  consigneeName: string
  consigneeArea: string
  areaDetail: string
  consigneeMobile: string
  consigneeTelephone: string
  postcode: string
  defaultStatus: number
}

@Component({})
export default class OrganizationManagement extends Vue {
  private tableData: TableData[] = []
  private addressShow: boolean = false
  private addressData: any = {}

  protected render() {
    return (
      <div class={Styles.shippingAddressView}>
        <el-button
          type="primary"
          size="mini"
          onClick={this.addAddress}
          class={Styles.addBtn}
        >
          新增收货地址
        </el-button>

        <AddressLayer
          show={this.addressShow}
          {...{
            on: {
              'update:show': (val: boolean) => {
                this.addressShow = val
              },
              'update:data': (val: any) => {
                this.addressData = val
              },
            },
          }}
          data={this.addressData}
          onSuccess={this.addressSuccess}
        />

        <el-table data={this.tableData}>
          <TableEmpty slot="empty" msg="暂无收货地址">
            <el-button type="primary" onClick={this.addAddress}>
              新增收货地址
            </el-button>
          </TableEmpty>
          <el-table-column
            prop="consigneeName"
            label="收货人"
            show-overflow-tooltip
          />
          <el-table-column
            prop="consigneeArea"
            label="所在地区"
            show-overflow-tooltip
            {...{
              scopedSlots: {
                default: (scope: any) => {
                  const { provinceName, cityName, areaName } = scope.row

                  return (
                    <span>{[provinceName, cityName, areaName].join('')}</span>
                  )
                },
              },
            }}
          />
          <el-table-column
            prop="areaDetail"
            label="详细地址"
            {...{
              scopedSlots: {
                default: (scope: any) => {
                  return (
                    <p class="aera-detail" title={scope.row['areaDetail']}>
                      {scope.row['areaDetail']}
                    </p>
                  )
                },
              },
            }}
          />
          <el-table-column
            prop="consigneeMobile"
            label="联系方式"
            show-overflow-tooltip
          />
          <el-table-column
            prop="id"
            label="操作"
            {...{
              scopedSlots: {
                default: (scope: any) => {
                  return (
                    <div>
                      <OperationCol
                        operations={this.getgetOperations(scope.row)}
                        showNum={2}
                        row={scope.row}
                        index={scope.$index}
                      />
                      <el-button
                        type="text"
                        class={{
                          default: scope.row.defaultStatus,
                        }}
                        loading={scope.row.loading}
                        onClick={() => this.setDefault(scope.row)}
                      >
                        {scope.row.defaultStatus ? '默认地址' : '设为默认'}
                      </el-button>
                    </div>
                  )
                },
              },
            }}
          />
        </el-table>
      </div>
    )
  }

  private mounted() {
    this.getTableList()
  }

  private getTableList() {
    service({
      url: '/seal/rest/account/listMyDeliveryAddress',
      method: 'POST',
      body: {},
    }).then(res => {
      this.tableData = res.data.list
    })
  }

  private getgetOperations(row: any) {
    const btns: any[] = [
      {
        id: 0,
        text: '修改',
        onClick: (index: number, rows: any) => {
          this.addressData = rows
          this.addressShow = true
        },
      },
    ]
    // 如果不是默认，添加删除按钮
    if (row.defaultStatus === 0) {
      btns.push({
        id: 1,
        text: '删除',
        isDelete: true,
        onClick: (index: number, rows: any) => {
          this.deleteRow(rows)
        },
      })
    }

    return btns
  }

  private addAddress() {
    this.addressShow = true
  }

  private setDefault(row: any) {
    this.$set(row, 'loading', true)

    service({
      url: '/seal/rest/account/setAddressAsDefault',
      method: 'POST',
      body: {
        id: row.id,
      },
    }).then(res => {
      this.$message.success('设置成功')
      row.loading = false
      this.getTableList()
    })
  }

  private deleteRow(row: any) {
    service({
      url: '/seal/rest/account/deleteDeliveryAddress',
      method: 'POST',
      body: {
        id: row.id,
      },
    }).then(res => {
      this.$message.success('删除成功')
      this.getTableList()
    })
  }

  private addressSuccess(): void {
    this.getTableList()
  }
}
